<template>
	<view class="pendingpay" v-show="isshow">
		<view class="pendingpay-wrap">
			<view class="header">
				<view class="header_flex">
					<view class="type">
						<image class="pending-img" src="../../static/qb.png"></image>
						<view>{{orderitem.typename}}</view>
					</view>
					<view class="lasttime" v-show="type == 1 && status != 3">请确认对方是否付款</view>
					<view class="lasttime" v-show="type == 2 && status != 3">已支付</view>
				</view>
				<view class="header_flex-right">
					<view class="phone" @click="phonecall(orderitem.phone)">
						<image clsas="bgimage" style="width:20px;height:20px" src="../../static/phone.png"></image>
						<view >电话</view>
					</view>
					<view class="contact">
						<image clsas="bgimage" style="width:20px;height:20px" src="../../static/lx.png"></image>
						<view>联系对方</view>
					</view>
				</view>
			</view>
			<view class="content">
				<view class="payprice"><text class="monenyicon">￥</text>{{orderitem.qian | moneyFilter}}</view>
				<view class="commflex">
					<view class="commcolor">单价</view>
					<view><text>￥</text>{{orderitem.danjia}}</view>
				</view>
				<view class="commflex">
					<view class="commcolor">数量</view>
					<view>{{orderitem.cbt}}</view>
				</view>
				<!-- <view class="warning">请使用本人支付宝账号向以下账号自行转账</view> -->
				<view class="commflex">
					<view class="commcolor">卖家账号</view>
					<view>{{user.account}}</view>
				</view>
				<view class="commflex">
					<view class="commcolor">卖家实名</view>
					<view>{{user.uname}}</view>
				</view>
				<view class="commflex">
					<view class="commcolor">订单号</view>
					<view>{{orderitem.order_id}}</view>
				</view>
				<view class="commflex">
					<view class="commcolor">{{type == 2 ? '支付方式':'收款方式'}}</view>
					<image v-show="orderitem.money_type == 2" style="width: 22px;height: 22px;" src="../../static/zfb.png"></image>
					<image v-show="orderitem.money_type == 1" style="width: 22px;height: 22px;" src="../../static/wx.png"></image>
				</view>
				<view class="checkvoucher" @click="showmoadl">查看付款凭证</view>
			</view>
		</view>
		<view class="qrcodemodal" v-show="showcode">
			<view class="mask" @click="showcode = false"></view>
			<view class="modalinfo">
				<image class="bgimage" :src="orderitem.pingzheng"></image>
			</view>
		</view>
		<view class="btncell" v-show="status != 3">
			<view class="cancleorder">申述</view>
			<view class="confirmorder" @click="confirmorder(orderitem.paytext)" v-show="orderitem.mc_id == userdetail.userId">确认收款订单完成</view>
		</view>
	<!-- 	<view class="btncell" v-show="status == 3">
			<view class="confirmorder" style="width:90%">交易已完成</view>
		</view> -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isshow:false,
				type: 0,
				status: 0,
				item: {},
				orderitem: {},
				user: {},
				showcode: false,
				userdetail:uni.getStorageSync('userDetail')
			}
		},
		onLoad(option) {
			this.item = JSON.parse(option.item)
			this.type = option.type
			this.status = option.status
			this.loaddata()
		},
		methods: {
			phonecall(mobile){
				uni.makePhoneCall({
					phoneNumber:mobile,
					success:function(res){
						console.log(res,'phonecall')
					}
				})
			},
			showmoadl(){
				uni.showLoading({
					title:'加载中'
				})
				this.showcode = true;
				setTimeout(()=>{
					uni.hideLoading()
				},3000)
			},
			loaddata() {
				let that = this;
				uni.request({
					url: 'https://www.ggshop1688.com/api/transaction/out_in_detail',
					data: {
						status: this.status,
						type: this.type == 2 ? 1 : 2,
						id: this.item.id
					},
					method: 'POST',
					header: {
						token: uni.getStorageSync('userInfo').token
					},
				}).then(data => {
					if (data[1].data.status == 1) {
						console.log(data[1].data.data)
						that.orderitem = data[1].data.data.detail
						if(that.type == 1){
							that.orderitem.paytext = '已收到款'
						}else{
							that.orderitem.paytext = '我已付款'
						}
						that.user = data[1].data.data.detail.payinfo
						that.isshow = true;
					}

				}).catch(err => {
					console.log(err)
				})
			},
			
			deepCopy(val) {
				return JSON.parse(JSON.stringify(val))
			},
			confirmorder(status) {
				let that = this;
				status = '已成功收款';
				that.orderitem.paytext = that.deepCopy(status)
				uni.request({
					url: 'https://www.ggshop1688.com/api/transaction/confirm',
					data: {
						id: this.item.id
					},
					method: 'POST',
					header: {
						token: uni.getStorageSync('userInfo').token
					},
				}).then(data => {
					if (data[1].data.status == 1) {
						that.$api.msg(data[1].data.msg)
						uni.navigateBack({
							
						})
					} else {
						that.$api.msg(data[1].data.msg)
					}

				}).catch(err => {
					console.log(err)
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.pendingpay {
		.qrcodemodal {

			.mask {
				position: fixed;
				width: 100%;
				height: 100%;
				top: 0;
				left: 0;
				opacity: 0.5;
				background-color: #000;
				z-index: 88;
			}

			.modalinfo {
				width: 300px;
				position: absolute;
				z-index: 99;
				transform: translateY(50%);
				top: 20px;
				/* width: 100px; */
				left: 50%;
				transform: translateX(-50%);

				.bgimage {
					width: 100%;
					height: 600px;
				}
			}
		}

		.btncell {
			display: flex;
			justify-content: space-around;
			position: fixed;
			bottom: 100upx;
			width: 100%;

			.cancleorder {
				background-color: #F9DDCB;
				height: 70upx;
				font-size: 26upx;
				text-align: center;
				width: 100px;
				line-height: 70upx;
				border-radius: 10upx;
				width: 336upx;
				color: #7F7E7E;
			}

			.confirmorder {
				background-color: #FF6500;
				border-radius: 10upx;
				height: 70upx;
				width: 336upx;
				font-size: 26upx;
				text-align: center;
				width: 336upx;
				color: #fff;
				line-height: 70upx;
			}
		}

		.pendingpay-wrap {
			.header {
				display: flex;
				background-color: #ED5B25;
				position: relative;
				align-items: center;
				height: 140upx;
				padding-bottom: 20upx;

				.header_flex {
					padding-left: 30upx;

					.type {
						font-size: 42upx;
						color: #fff;
						display: flex;
						align-items: center;
						padding-bottom: 13upx;

						.pending-img {
							width: 45upx;
							height: 40upx;
							margin-right: 10upx;

							image {
								width: 100%;
								height: 100%;
							}
						}
					}

					.lasttime {
						font-size: 24upx;
						color: #fff;
					}
				}

				.header_flex-right {
					position: absolute;
					right: 0;
					display: flex;
					text-align: center;

					.bgimage {
						width: 40upx;
						height: 40upx;
					}

					.phone {
						color: #fff;
						font-size: 20upx;
						padding:10px;
						width:80px;
					}

					.contact {
						color: #fff;
						font-size: 20upx;
						padding:10px;
						width:80px;
					}
				}
			}

			.content {
				font-size: 30upx;
				padding: 30upx;

				.payprice {
					font-size: 46upx;
					color: #ED5B25;

					.monenyicon {
						font-size: 26upx;
					}
				}

				.warning {
					font-size: 24upx;
					color: #ED5B25;
					margin-top: 40upx;
					margin-bottom: 40upx;
				}

				.commflex {
					display: flex;
					justify-content: space-between;
					padding: 20upx 0upx;
				}

				.checkvoucher {
					background-color: #F9DDCB;
					margin-top: 60px;
					height: 70upx;
					line-height: 70upx;
					text-align: center;
					color: #ED5B25;
					font-size: 25upx;
					border-radius: 10upx;
				}

				.commcolor {
					color: #757575;
				}
			}


		}
	}
</style>
